import React, { useEffect } from "react";
import { btnStyleList } from "./helpers/const";
import { formatUrlParams } from "./helpers/utils";

const SingleImgTextBox= (props) => {
  const { dataConfig={}, logParams, isInMobile} = props || [];
  console.log(props,111 );
  const {
    mainImgUrl,
    mainMoblileImgUrl,
    mainDesc = "",
    btnList = [],
    linkImg = "",
    btnBackgroundImageUrl = "",
  } = dataConfig || {};

  const renderItemImg = () => {
    if (linkImg) {
      return (
        <a
          href={linkImg}
          target="_blank"
          data-trace-click="material_imglist_click_url"
          data-logmeta={formatUrlParams(logParams)}
        >
          <img
            className="content_img"
            src={isInMobile ? mainMoblileImgUrl : mainImgUrl}
          />
        </a>
      );
    }
    return (
      <img
        className="content_img"
        src={isInMobile ? mainMoblileImgUrl : mainImgUrl}
      />
    );
  };

  return (
    <div className="new-img-text-box">
      <div className="img-text-item">
        {mainDesc && <div className="describe-box">{mainDesc}</div>}
        <div className="main-img-box">
          {renderItemImg()}
        </div>
        {Array.isArray(btnList) && btnList.length > 0 && (
          <div className="action-box" style={{backgroundImage: `url(${btnBackgroundImageUrl})`}}>
            {btnList.map((item, index) => {
              const { btnText, btnLink,btnType } = item || {};
              return (
                <div
                  className="action-item"
                  data-trace-click="material_image_click_url"
                  data-logmeta={formatUrlParams({
                    ...logParams,
                    btnText: btnText,
                  })}
                  style={btnStyleList[btnType||'normal']}
                  onClick={() => {
                    window.open(btnLink);
                  }}
                >
                  {btnText}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};
export default SingleImgTextBox;
